<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor='bg-white' :is-back="false">
			<block slot="content">确认订单</block>
		</bar-title>
		
		<!--收货地址-->
		<view class="margin-tb-sm view-box" v-if="!addressShow" @click="unauthorizedAddressHandle">
			<view class="bg-white card address-view">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="bg-grey icon-view">
							<text class="cuIcon-locationfill"/>
						</view>
						<view class="content">
							<view class="text-black">
								<text>无</text>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">暂无收货地址</view>
							</view>
						</view>
						<view class="action">
							<text class="text-gray cuIcon-right"/>
						</view>
					</view>
				</view>
				<view class="address-line"/>
			</view>
		</view>

    <view class="margin-tb-sm view-box" v-else @click="unauthorizedAddressHandle">
      <view class="bg-white card address-view">
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <view class="bg-grey icon-view">
              <text class="cuIcon-locationfill"/>
            </view>
            <view class="content">
              <view class="text-black">
                <text>{{ address.fullname }}</text>
                <text class="margin-left">{{ address.mobilePhone }}</text>
              </view>
              <view class="text-gray text-sm flex">
                <view class="text-cut">{{address.prov}}{{address.city}}{{address.area}}{{address.address}}</view>
              </view>
            </view>
            <view class="action">
              <text class="text-gray cuIcon-right"/>
            </view>
          </view>
        </view>
        <view class="address-line"/>
      </view>
    </view>
		<!--商品信息-->
		<view class="margin-tb-sm view-box">
			<view class="bg-white card goods-view">
				<view class="goods-info-view-box solid-bottom">
					<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+imgUrl +  goods.add_file +')'}]"/>
					<view class="goods-info-view">
						<view class="text-cut text-black">{{goods.name}}</view>
						<view class="text-sm text-gray">{{ sku.goods_sku_text }}</view>
						<view class="goods-price-view">
							<text class="text-price text-red text-lg">{{ sku.sum_price }}</text>
						</view>
					</view>
				</view>
				
				<view class="margin-top-lg checked-view">
					<view class="text-black-view">
						<text class="text-black">平台服务保障（推荐选购）</text>
					</view>
				</view>
				
				<view class="margin-top-sm flex service-view" @click="onServiceClick">
					<view class="flex-sub bg-page padding-sm margin-xs radius">
						<view class="text-black text-cut" v-if ="goods.type == 2">维修保险费</view>
						<view class="text-black text-cut" v-else>押金</view>
						<view class="text-black">
							<text class="margin-right-xs">￥ {{ goods.su_insurance }}</text>
						</view>
						<view class="corner-mark " :class="serviceBool ? 'check' :''"/>
						<text class="cuIcon-check check-icon check" :class="serviceBool ? 'check' :''"/>
					</view>
				</view>
			</view>
		</view>
		
		<!--支付方式-->
		<view class="margin-tb-sm view-box">
			<view class="bg-white card pay-view">
				<view class="cu-list menu">
					<view class="cu-item">
						<view class="content">
							<text class="text-black">配送方式</text>
						</view>
						<view class="action">
							<text class="text-black">包邮</text>
						</view>
					</view>
				</view>	
			</view>
		</view>
		
		<!--商品价格计算-->
		<view class="margin-tb-sm view-box">
			<view class="bg-white card price-view">
				
				<view class="text-black item-view">
					<view class="text-cut title">商品总额</view>
					<text class="text-red text-price text-right">{{sku.sum_price}}</text>
				</view>
        <view class="text-black item-view">
					<view class="text-cut title">月租金</view>
					<text class=" text-price text-right">{{ sku.mon_price }}</text>
				</view>
        <view class="text-black item-view">
					<view class="text-cut title">到期买断金</view>
					<text class=" text-price text-right">{{ sku.expire_price }}</text>
				</view>
        <view class="text-black item-view">
					<view class="text-cut title">租用天数</view>
					<text class="text-right">{{sku.by_stages * 30}}天</text>
				</view>
			</view>
		</view>
    <view class="margin-tb-sm view-box">
      <view class="bg-white card price-view">

        <view class="text-black item-view">
          <view class="text-cut title">备注</view>
        </view>
        <u-input v-model="textareaValue" type="textarea" :border="false" :height="200"  />
      </view>
    </view>
		<!--占位底部距离-->
		<view class="cu-tabbar-height"/>
		
		<!--底部操作-->
		<view class="bg-white footer-fixed foot-padding-bottom">
			<view class="cu-bar padding-lr">
				<view class="text-black text-bold price-view">
					<text>首期应付：￥</text><text class="text-red text-xl">{{monPrice}}</text>
				</view>
				<view class="btn-view">
					<button class="cu-btn radius bg-red" @tap="payTap">确认下单</button>
				</view>
			</view>
		</view>
    <u-mask :show="loadModal"></u-mask>
    <view class="cu-load load-modal" v-if="loadModal">
      <view class="gray-text">加载中...</view>
    </view>
	</view>
</template>

<script>
	import barTitle from "../../components/common/bar-title";
  import {mapState} from 'vuex'
  import {orderPay} from "../../common/http";
  import * as math from 'mathjs';
  const esignPlugin = requirePlugin("esign");

  export default {
		components: {
			barTitle,
		},
		data() {
			return {
				goodsList: [], checkAll: true,
        textareaValue:'',
        addressShow: false,
        address:{
          city: '',
          area: '',
          address:'',
          prov:'',
          fullname:'',
          mobilePhone:''
        },
        serviceBool : true,
        goods: {},
        sku:{},
        orderId:0,
        userInfo: uni.getStorageSync('userInfo'),
        loadModal: false
			}
		},
    computed: {
      ...mapState(['imgUrl']),
      monPrice() {
        let goods = this.goods;
        let value = this.sku;
        let su = this.serviceBool
        if(value){
          /* 判断 是否选中首期差价 */
          if(su){
            let aptitude = this.userInfo.aptitude
            if(aptitude === 6){
              console.log(this.goods.su_insurance);
              return math.format(math.bignumber(parseFloat(this.goods.su_insurance)))
            }else{
              var num = math.format(math.multiply(math.bignumber(parseFloat(value.mon_price)), math.bignumber(aptitude)))
              // 返回最终价格
              return math.format(math.add(num, math.bignumber(parseFloat(this.goods.su_insurance))))
            }
          }else{
            let aptitude = this.userInfo.aptitude
            if(aptitude === 6){
              return math.format(0)
            }else{
                return math.format(math.multiply(math.bignumber(parseFloat(value.mon_price)), math.bignumber(parseFloat(this.userInfo.aptitude))))
            }
          }
        }
      }
    },
    onShow(){
      const that = this;
      const {
        code,
        message,
      } = esignPlugin.getSignStatusInfo();
      if(code == '000'){
        uni.navigateTo({
          url: '/sub_pages/order/paytop?id='+that.orderId ,
        });
      }
      console.log('code', code)
      console.log('message', message)
    },
		onLoad(option) {
      let that = this;
      // 获取本地信息
      uni.getStorage({
        key: 'goods',
        success: function (res) {
          that.goods = res.data.goods
          that.sku = res.data.sku
        }
      })
		},
		onReady() {
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
      onServiceClick(){
        this.serviceBool = !this.serviceBool;
      },
      // 授权收货地址
      unauthorizedAddressHandle(){
        let that = this;
        uni.chooseAddress({
          fail(err){
            console.log(2)
            uni.showToast({
              title: '授权失败'
            })
            that.addressShow = false
          },
          complete(r){
            if(r.resultStatus === '9000'){
              that.address = {
                city: r.result.city,
                area: r.result.area,
                address: r.result.address,
                prov: r.result.prov,
                fullname: r.result.fullname,
                mobilePhone: r.result.mobilePhone
              }
              that.addressShow = true
            }
          }
        })

      },
			payTap() {
        let goods = JSON.stringify({
          "goods_id": this.goods.id, // 产品ID
          "sku_price_id": this.sku.id // 选中的 规格ID
        })
        if(!this.serviceBool){
          uni.showToast({
            title: '请勾选服务保障',
            icon: 'none'
          })
          return;
        }
        if(!this.addressShow){
          uni.showToast({
            title: '请选择收货地址',
            icon: 'none'
          })
          return;
        }

        this.loadModal = true;
        let usePayParams = {
          goodsList: goods,
          user_id: uni.getStorageSync('userId'), // 用户ID
          address: JSON.stringify(this.address), // 地址
          remark: this.textareaValue // 备注
        }
        orderPay(usePayParams).then(res=>{
          if(res.data.code == 0){

            this.loadModal = false;
            this.orderId = res.data.data.orderId
            my.navigateTo({
              url: 'plugin://esign/esign?env=prod&flowId='+res.data.data.flowId+'&signerId='+res.data.data.accountId+'&skipResult=true&skipGuide=true',
            })
          }else{
            this.loadModal = false;
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            })
          }
        })

			}
		}
	}
</script>

<style lang="scss">
.view-box {
  position: relative;
  padding: 0 18.18rpx;
  .card {
    position: relative;
    padding: 18.18rpx;
    border-radius: 9.09rpx;
    box-shadow: 0 0 10.9rpx #f7f7f7;
  }
}
.address-view {
  .cu-list.menu-avatar>.cu-item {
    height: 55px;
    &:after {
      width: 0;
      height: 0;
      border-bottom: 0;
    }
    .icon-view {
      position: absolute;
      border-radius: 100%;
      text-align: center;
      line-height: 45.45rpx;
      height: 45.45rpx;
      width: 45.45rpx;
      left: 9.09rpx;
      top: 20rpx;
    }
    .content {
      left: 72.72rpx;
      width: calc(100% - 94.54rpx - 27.27rpx);
    }
    .action {
      text-align: right;
      width: 36.36rpx;
    }
  }
  .address-line {
    position: absolute;
    background-image: url('/static/img/a9l.png');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 0 0 9.09rpx;
    height: 9.09rpx;
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
  }
}
.goods-view {
  .title-view {
    position: relative;
    line-height: 49.09rpx;
    height: 47.27rpx;
    .cu-avatar {
      position: absolute;
    }
    .title-box {
      position: relative;
      padding-left: 63.63rpx;
      .cu-tag {
        position: relative;
        top: -3.63rpx;
      }
    }
  }
  .goods-info-view-box {
    position: relative;
    padding: 27.27rpx 18.18rpx;
    .cu-avatar {
      position: absolute;
      height: 163.63rpx;
      width: 163.63rpx;
      left: 18.18rpx;
    }
    .goods-info-view {
      position: relative;
      padding-left: 181.81rpx;
      height: 163.63rpx;
      line-height: 1.4;
      .tag-view {
        position: relative;
      }
      .goods-price-view {
        position: relative;
        line-height: 1.7;
        top: 9.09rpx;
      }
    }
  }
  .solid-bottom::after {
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  }
  .gift-list {
    position: relative;
    .title {
      padding-right: 181.81rpx;
    }
    .text-right {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .gift-list + .gift-list {
    margin-top: 10px;
  }
  .checked-view {
    position: relative;
    .checked {
      position: absolute;
      transform: scale(0.7);
    }
    .text-black-view {
      padding-left: 20.63rpx;
      line-height: 47.27rpx;
    }
  }
  .service-view {
    .flex-sub {
      position: relative;
      text-align: center;
      line-height: 1.8;
      border: 2rpx solid #f7f5f5;
      .cu-tag {
        position: relative;
        top: -4rpx;
      }
      .corner-mark {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 36.36rpx solid #eaeaea;
        border-left: 45.45rpx solid transparent;
      }
      .check-icon {
        position: absolute;
        font-size: 20rpx;
        bottom: -3px;
        color: #FAFAFA;
        right: 2rpx;
      }
      .corner-mark.check {
        border-bottom: 36.36rpx solid #e54d42;
      }
      .check-icon.check {
        color: #fff;
      }
    }
  }
}

.card.pay-view {
  position: relative;
  padding: 10px 10px 0;
  .title-view {
    position: relative;
    .text-right {
      position: absolute;
      right: 0;
    }
  }
  .tag-view-box {
    position: relative;
    padding: 0 0 27.27rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    .cu-tag {
      margin-top: 18.18rpx;
      margin-right: 9.09rpx;
    }
    .cu-tag + .cu-tag {
      margin-left: 0;
    }
  }
  .cu-list.menu>.cu-item {
    padding: 0;
    min-height: 90.9rpx;
    .content {
      font-size: 27.27rpx;
    }
    .action .cu-tag{
      position: relative;
      top: -3.63rpx;
      right: 9.09rpx;
    }
  }
  .cu-list.menu>.cu-item.arrow {
    padding-right: 29.09rpx;
    &:before {
      right: 0;
      color: #aaaaaa;
    }
  }
}

.price-view {
  position: relative;
  .item-view {
    position: relative;
    .title {
      padding-right: 181.81rpx;
    }
    .text-right {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .item-view + .item-view {
    margin-top: 18.18rpx;
  }
}

.agreement-checked-view {
  position: relative;
  padding: 18.18rpx 27.27rpx;
  .checked {
    position: absolute;
    transform: scale(0.7);
  }
  .text-black-view {
    padding-left: 63.63rpx;
    line-height: 47.27rpx;
  }
}

.footer-fixed {
  box-shadow: 0 -2rpx 9.09rpx 0 #ececec;
  //z-index: 99999;
  .cu-bar {
    width: 100%;
    .price-view {
      width: 100%;
      padding-right: 254.54rpx;
    }
    .btn-view {
      position: absolute;
      float: right;
      right: 29.09rpx;
    }
  }
}
</style>
